<template>
  <div class='comment-reply'>
    <van-nav-bar :title="`${replyComment.reply_count}条评论`">
      <van-icon
        slot="left"
        name="cross"
        @click="$emit('closeCommentReplyPopShow')"
      />
    </van-nav-bar>
    <comment-item
      :comments="replyComment"
    />

    <comment-list
      :source="replyComment.com_id"
      :commentList="commentReplyList"
      type="c"
    />

    <van-cell class="bottomBar">
      <van-button
        type="default"
        text="写评论"
        class="commentBtn"
        round
        center
        size="small"
        @click="isCommentReplyPopShow = true"
      />
    </van-cell>

    <van-popup
      v-model="isCommentReplyPopShow"
      position="bottom"
    >
      <comment-post
        :target="replyComment.com_id"
        :article-id="articleId"
        @post-success="onPostSuccess"
      />
    </van-popup>
  </div>
</template>

<script>
import CommentItem from './comment-item'
import CommentList from './comment-list'
import CommentPost from './comment-post'

export default {
  name: 'commentReply',
  components: {
    CommentItem,
    CommentList,
    CommentPost
  },
  props: {
    replyComment: {
      type: Object,
      required: true
    },
    articleId: {
      type: [Object, String, Number],
      required: true
    }
  },
  data () {
    return {
      isCommentReplyPopShow: false,
      commentReplyList: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onPostSuccess (comment) {
      this.commentReplyList.unshift(comment)
      this.replyComment.reply_count++
      this.isCommentReplyPopShow = false
    }
  }
}
</script>
<style lang='less' scoped>
.bottomBar {
  position: fixed;
  bottom: 0;
  height: 50px;
  overflow: hidden;
  box-shadow:  10px 0px 4px #e4e4e4;
}
.commentBtn {
  width: 100%;
}
</style>
